<style>
    .slider-bar {
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background-color: #262626;
    }

    .slider-bar .content {
        width: 100%;
        height: 65%;
        /*background-color: #fff;*/
    }

    .slider-bar .content .block-login {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }

    .slider-bar .content .block-login span {
        width: 100%;
        text-align: center;
        margin-top: 3px;
        font-size: 8px;
        color: white;
    }

    .slider-bar .content .block-shopcart {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        height: 180px;
        background-color: #DF147F;
        font-size: 14px;
        color: white;
        padding: 2px;
    }

    .slider-bar .content .block-shopcart .pointer {
        width: 16px;
        height: 16px;
        margin-top: 10px;
        color: #fa2a83;
        font-size: 12px;
        text-align: center;
        background-color: white;
        border-radius: 50%;
    }

    .uptotop {
        position: absolute;
        left: 0;
        bottom: 80px;
    }

    .cart-card {
        position: relative;
        left: 10px;
        display: flex;
        height: 150px;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;
        transition: all 0.5s;
        opacity: 1;
    }

    .cart-card.remove {
        transition: all 0.5s;
        opacity: 0;
        left: -430px;
    }

    .cart-card.up {
        height: 0;
        transition: all 0.4s;
    }

    .cart-card .contain {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

    .cart-card .contain .title {
        width: 280px;
        font-size: 18px;
        font-weight: bolder;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 8px 3px;
        margin-left: 0px;
    }

    .cart-card > img {
        width: 130px;
        height: 130px;
        border-radius: 8px;
        margin-right: 20px;
    }

    .cart-card .contain .number {
        font-size: 14px;
        color: #cccccc;
    }

    .cart-card .contain .price {
        font-size: 16px;
        color: #fa2a83;
    }

    .cart-card .btn-group {
        position: absolute;
        display: flex;
        align-items: center;
        right: 20px;
        bottom: 20px;
    }

    .cart-card .btn-group div {
        width: 15px;
        height: 15px;
        text-align: center;
        line-height: 15px;
        font-size: 12px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 3px;
        cursor: pointer;
        user-select: none;
    }

    .cart-card .btn-group span {
        font-size: 15px;
        margin-left: 5px;
        margin-right: 5px;
        user-select: none;
    }

    .foot-bar {
        display: flex;
        width: calc(100% + 20px);
        height: 45px;
        line-height: 45px;
        border: 1px solid #eeeeee;
        margin-left: -10px;
        margin-bottom: -10px;
        z-index: 10;
        background-color: #fff;
    }

    .foot-bar .total {
        width: 80%;
        height: 100%;
        line-height: 45px;
        font-size: 14px;
        margin-left: 14px;
    }

    .foot-bar .order {
        width: 20%;
        height: 45px;
        line-height: 42px;
        text-align: center;
        background-color: #fa2a83;
        color: #fff;
        font-size: 16px;
        padding: 3px 5px;
        box-sizing: border-box;
    }
</style>
<section class="slider-bar">
    <div class="content">
        <a href="./login.html">
            <div class="block-login">
                <img src="./static/icon-my.png" width="70%"/>
                <span>账号</span>
            </div>
        </a>
        <div class="block-shopcart" onclick="drawer.showModel()">
            <img src="./static/icon-shoppackage.png" width="50%"/>
            <div class="name" style="width: 14px;margin-top: 2px">购物车</div>
            <div class="pointer">0</div>
        </div>
        <img src="./static/mp-icons.png" width="100%"/>
        <a class="uptotop" href="#vip"><img src="./static/icon-up.png" width="100%"></a>
    </div>
</section>
<div class="drawer qg-drawer" style="opacity: 0">
    <div class="qg-content" style="padding: 10px;display: flex;flex-flow: column nowrap;height: calc(100% - 20px)">
        <div class="container" style="flex-grow:1">

        </div>
        <div class="foot-bar">
            <div class="total"><span>总计：</span><span style="color: #fa2a83">￥</span><span class="price" style="font-size: 20px;color: #fa2a83">0</span></div>
            <div class="order">结算</div>
        </div>
    </div>
</div>
<div class="qg-model"></div>
<script>
    var drawer = new Drawer()
    $(function () {
        $('.drawer').css('opacity', 1)
        var msg = new Messgebox()
        //读取数据
        readData()
        //更新视图层
        updateView()
        $('.order').on("click",function (){
            payment()
        })
        //读取数据
        function readData () {
            let shopcart = localStorage.getItem('shopcarts')
            shopcart = JSON.parse(shopcart)
            console.log('购物车获取', shopcart)
            if (searchCart(shopcart) == -1) {
                console.log("购物车空")
                // msg.show({
                //     msg: '购物车空的',
                // })
            } else {
                let token = getCookie('token')
                let index = searchCart(shopcart)
                let cartlist = shopcart[index].shopcarts
                console.warn('读取数据->', cartlist)
                $('.pink-point').text(cartlist.length)
                $('.pointer').text(cartlist.length)

                let cardItems = cartlist.map(item => `<div class="cart-card">
                <img src="${item.src}" width="150">
                <div class="contain">
                    <div class="title">${item.title}</div>
                    <p class="number"><span>数量：</span>x<span class="num">${item.count}</span></p>
                    <p class="price">${item.price}</p>
                </div>
                <div class="btn-group">
                    <div class="down">-</div>
                    <span class="howmany">${item.count}</span>
                    <div class="up">+</div>
                </div>
            </div>`).join('')

                $('.qg-content .container').append(cardItems)
                updateModel()
            }
        }

        //更新模型层
        function updateModel () {
            console.log('模型层更新')
            let shopcart = localStorage.getItem('shopcarts')
            shopcart = JSON.parse(shopcart)
            let index = searchCart(shopcart)
            let update = []
            let total = 0

            $('.qg-content .cart-card').each((index, item) => {
                let json = {
                    title: $(item).find('.contain .title').text(),
                    src: $(item).find('img').attr('src'),
                    count: $(item).find('.contain .num').text(),
                    price: $(item).find('.contain .price').text(),
                }
                total += json.count * json.price
                update.push(json)
            })
            $('.total .price').html(total)
            shopcart[index].shopcarts = update
            console.log('model->', shopcart)
            $('.pink-point').text(update.length)
            $('.pointer').text(update.length)
            localStorage.setItem('shopcarts', JSON.stringify(shopcart))
        }

        //更新视图层
        function updateView () {
            $('.qg-content .container').on('click', '.cart-card .btn-group .down', function () {
                console.log('视图更新')
                var cout = parseInt($(this).next().text())
                if (cout - 1 <= 0) {
                    cout = 1
                    $(this).next().html(--cout)
                    $(this).parent().parent().find('.contain .num').html(cout)
                    setTimeout(() => {
                        $(this).parent().parent().addClass('remove')
                        setTimeout(() => {
                            $(this).parent().parent().addClass('up')
                        }, 400)
                        setTimeout(() => {
                            $(this).parent().parent().remove()
                            msg.show({
                                msg: '移除一件商品',
                            })
                            updateModel()
                        }, 700)
                    }, 30)
                    console.warn('0')
                } else {
                    $(this).next().html(--cout)
                    $(this).parent().parent().find('.contain .num').html(cout)
                    updateModel()
                }
            })
            $('.qg-content .container').on('click', '.btn-group .up', function () {
                console.log('视图更新')
                var cout = parseInt($(this).prev().text())
                $(this).prev().html(++cout)
                $(this).parent().parent().find('.contain .num').html(cout)
                updateModel()
            })
        }

        function payment () {
            let shopcart = localStorage.getItem('shopcarts')
            shopcart = JSON.parse(shopcart)
            let index = searchCart(shopcart)
            $('.qg-content .container').html('')
            $('.total .price').html('0')
            $('.pink-point').text(0)
            $('.pointer').text(0)
            shopcart[index].shopcarts.length = 0
            localStorage.setItem('shopcarts', JSON.stringify(shopcart))
            msg.show({
                msg:'清空购物车'
            })
        }

        function searchCart (shopcart) {
            let bool = -1
            let token = getCookie('token')
            if (shopcart === null) {
                return bool
            }
            shopcart.forEach((item, index) => {
                if (item.token === token) {
                    bool = index
                    return
                }
            })
            if (bool >= 0) {
                return bool
            } else {
                return -1
            }
        }
    })
</script>